<template>
	<view class="bg">
		<view class="all">
			<view class="sex">
				<view class="xinbie">
					性别
				</view>
				<view class="sex_shan" >
					<view class="men" :class="{'tab4':sex == '男'}" @click="sex='男'">
						<view class="img">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/nan.png" mode="aspectFill" v-if="sex=='男'"></image>
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/nan_1.png" mode="aspectFill" v-else></image>
						</view>
						<view class="nan">
							男生
						</view>
					</view>
					<view class="men" :class="{'tab4':sex == '女'}" @click="sex='女'">
						<view class="img">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/wen.png" mode="aspectFill" v-if="sex=='女'"></image>
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/wen_1.png" mode="aspectFill" v-else></image>
						</view>
						<view class="nan">
							女生
						</view>
					</view>
					<view class="men" :class="{'tab4':sex == ''}" @click="sex=''">
						<view class="img">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/quan.png" mode="aspectFill" v-if="sex==''"></image>
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/quan_1.png" mode="aspectFill" v-else></image>
						</view>
						<view class="nan">
							不限
						</view>
					</view>
				</view>
			</view>
			<view class="city" @click="toSelectCity">
				<view class="city-one">
					城市
				</view>
				<view class="city-two">
					<uni-icons type="location" size="24"></uni-icons>
					<text v-if="city">{{city}}</text>
					<text v-else>全国</text>
				</view>
			</view>
			<view class="sub" @click="sub">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				city:'',
				sex:'',
				index:2,
				user:{}
			}
		},
		methods:{
			toSelectCity(){
				uni.navigateTo({
					url: '/pages/city/cityList'
				})
			},
			sub(){
				const params={sex:this.sex,city:this.city}
				this.user=uni.getStorageSync('user');
				uni.setStorageSync('Sex',this.sex);
				uni.$emit('getFiltrate',params)
				uni.switchTab({
					url: '/pages/tab/assistant'
				})
			}
		},
		onShow() {
			let that = this
			uni.$on('getSelectCity', function(data) {
				console.log('data', data.name)
				if (data.name!='全国') {
					that.city = data.name+'市'
				}else{
					that.city=that.city
				}
			})
		},
		onLoad() {
			this.sex=uni.getStorageSync('Sex')
		}
	}
</script>

<style lang="scss">
	body,html{
		height: 100vh;
	}
	.bg{
		width: 100%;
		height: 100vh;
		background-color: #fff;
		.all{
			box-sizing: border-box;
			padding: 20rpx 60rpx;
		}
	}
	.sex{
		width: 100%;
		.xinbie{
			font-size: 14px;
			color: #000;
		}
		.sex_shan{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;
			.men{
				height: 110rpx;
				width: 120rpx;
				color: #000;
				background-color: #eeeeee;
				border-radius: 10rpx;
				text-align: center;
				line-height: 110rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.img{
					width: 60rpx;
					height: 60rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.nan{
					height: 30rpx;
					line-height: 30rpx;
					font-size: 28rpx;
					text-align: center;
					margin-top: 10rpx;
				}
			}
			.tab4{
				background-color: #000;
				color: #fff;
				.nan{
					color: #fff;
				}
			}
		}
	}
	.city{
		width: 100%;
		margin-top: 40rpx;
		.city-one{
			font-size: 14px;
			color: #000;
		}
		.city-two{
			height: 80rpx;
			width: 100%;
			background-color: #eeeeee;
			box-sizing: border-box;
			padding-left: 10rpx;
			margin-top: 10rpx;
			display: flex;
			align-items: center;
		    border-radius: 8rpx;
			text{
				color: #000;
			}
		}
	}
	.sub{
		width: 100%;
		height: 80rpx;
		border-radius: 8rpx;
		margin-top: 80rpx;
		background-color: #000;
		color: #fff;
		font-size: 20px;
		letter-spacing: 1.5px;
		text-align: center;
		line-height: 80rpx;
	}
</style>